<template>
    <section class="chart-container">
        <el-row>
            <!--工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters" :rules="formRules">
                    <el-form-item>
                        <el-input v-model="filters.device_no" placeholder="设备编号"></el-input>
                    </el-form-item>
                    <el-form-item prop="count">
                        <el-input v-model="filters.count" placeholder="记录条数"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="filters.ele" placeholder="请选择监测数值">
                            <el-option v-for="item in eleEmu" :key="item.key" :label="item.value" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getMonitorData">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <div id="chartLine" style="width:100%; height:500px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
//import echarts from 'echarts'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼图组件
require('echarts/lib/chart/line')
// 引入提示框和图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')

export default {
    data() {
        return {
            chartLine: null,
            monitorData: [],
            paramData: [[], [], [], [], [], [], [], [], [], []],
            e_index: [],
            e_param: [],

            filters: {
                device_no: '',
                ele: '',
                count: '100'
            },
            formRules: {
                count: [
                    { required: true, message: '请输入整数值', trigger: 'blur' },
                    { pattern: /^\d+$/, message: '请输入整数值', trigger: 'blur' }
                ]
            },
            eleEmu: [
                {
                    key: 'param1',
                    value: 'pm2.5'
                }, {
                    key: 'param2',
                    value: 'pm10'
                }, {
                    key: 'param3',
                    value: 'pm100'
                }, {
                    key: 'param4',
                    value: '温度'
                }, {
                    key: 'param5',
                    value: '湿度'
                }, {
                    key: 'param6',
                    value: '风速'
                }, {
                    key: 'param7',
                    value: '风向'
                }, {
                    key: 'param8',
                    value: '风角度'
                }, {
                    key: 'param9',
                    value: '噪声'
                }, {
                    key: 'param10',
                    value: '主板'
                }, {
                    key: 'all',
                    value: '全部'
                }
            ]
        }
    },
    methods: {
        drawLineChart: function() {
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            let chartOptions = {
                title: {
                    text: '^.^'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.e_param
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.e_index
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            }
            if (this.filters.ele == 'all') {
                let lines = [];
                for (let i = 0; i < this.paramData.length; i++) {
                    lines[i] = {
                        name: this.e_param[i],
                        type: 'line',
                        stack: '总量',
                        data: this.paramData[i]
                    }
                }
                chartOptions.series = lines;
            } else {
                chartOptions.series = [
                    {
                        name: this.e_param[0],
                        type: 'line',
                        stack: '总量',
                        data: this.paramData[this.getEleIndex()]
                    }
                ]
            }
            this.chartLine.setOption(chartOptions);
        },
        drawCharts: function() {
            this.drawLineChart()
        },
        getMonitorData: function() {
            if (this.filters.device_no && this.filters.count) {

                let token = sessionStorage.getItem('token')
                let params = this.formatHttpGetParams({ page: 1, size: this.filters.count, token: token })
                let path = 'api/monitor/download/latest/' + String.trim(this.filters.device_no)
                this.$http.get(this.$store.state.domain + path + params).then(function(res) {
                    if (res.body.respCode == '0000') {
                        this.total = res.body.count
                        this.monitorData = res.body.data
                        for (let k = 0; k < this.paramData.length; k++) {
                            this.paramData[k] = []
                        }
                        for (let i = 0; i < this.monitorData.length; i++) {
                            this.paramData[0][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param1)
                            this.paramData[1][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param2)
                            this.paramData[2][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param3)
                            this.paramData[3][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param4)
                            this.paramData[4][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param5)
                            this.paramData[5][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param6)
                            this.paramData[6][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param7)
                            this.paramData[7][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param8)
                            this.paramData[8][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param9)
                            this.paramData[9][this.monitorData.length - 1 - i] = parseFloat(this.monitorData[i].param10)
                            this.e_index[i] = i
                        }
                        if (this.filters.ele == 'all') {
                            for (let j = 0; j < this.paramData.length; j++) {
                                this.e_param[j] = this.eleEmu[j].value
                            }
                        } else {
                            this.e_param = []
                            this.e_param[0] = this.eleEmu[this.getEleIndex()].value
                        }

                        this.drawCharts()
                    } else {
                        if (res.body.respMsg != null) {
                            alert(res.body.respMsg)
                        } else {
                            alert('后台未知异常，请与管理员联系')
                        }
                    }
                }, function() {
                    alert('网络请求处理失败')
                })
            }
        },
        getEleIndex: function() {
            return parseInt(this.filters.ele.substr(5, 1)) - 1
        }
    },
    mounted: function() {
        if (this.$route.query.device_no) {
            this.filters.device_no = this.$route.query.device_no
        }
        if (this.$route.query.ele) {
            this.filters.ele = this.$route.query.ele
        }
        this.getMonitorData()
    },
    updated: function() {
        //this.getMonitorData()
    }
}
</script>

<style scoped>
.chart-container {
    width: 100%;
    float: left;
}

.el-col {
    padding-left: 15px;
}
</style>
